<template>
	<view class="container">
		<header-view type="second" rightShow>{{$t('资金记录')}}</header-view>
		<view class="content">
			<view class="nav">
				<view class="nav-item" v-for="(i, index) in navList" :key="index" :class="{active: current == index}"
					@click="switchTab(index)">
					<view>{{i}}</view>
					<view class="line"></view>
				</view>
			</view>
			<scroll-view scroll-y class="list" @scrolltolower="scrollBottom">
				<view v-if="current == 0">
					<view class="list1" v-if="priceLog.length!=0">
						<view class="item" v-for="(item, index) in priceLog" :key="item.id">
							<view class="item_time">{{ item.time_str }}</view>
							<view class="item_detail flex_between">
								<view class="col_between">
									<view class="amount">{{ item.money }}</view>
									<view class="name">{{ item.memo }}</view>
								</view>
								<view class="col_between" style="text-align: end;">
									<view class="amount">Order No.：{{ item.order_sn }} code：{{ item.pro_code }}</view>
									<view class="name">{{$t('备注')}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="no" v-else>No record yet</view>
				</view>
				<view v-if="current == 1">
					<view class="list1" v-if="rechargeList.length!=0">
						<view class="item" v-for="item in rechargeList">
							<view class="top flex_between">
								<view class="red flex">
									<image src="../../static/img/status2.png"
										style="width: 18px;height: 18px;margin-right: 7px;"></image>
									<text>{{$t('充值')}}</text>
								</view>
								<view class="item_time">{{item.time_str}}</view>
							</view>
							<view class="item_detail flex_between">
								<view class="col_between">
									<view class="amount">+{{item.money}}</view>
									<view class="name">{{$t('充值金额')}}</view>
								</view>
								<view class="col_between" style="text-align: center;">
									<view class="amount">{{item.order_sn}}</view>
									<view class="name">{{$t('订单号')}}</view>
								</view>
								<view class="col_between" style="text-align: end;">
									<view class="amount">{{item.status_str}}</view>
									<view class="name">{{$t('状态')}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="no" v-else>No record yet</view>
				</view>
				<view v-if="current == 2">
					<view class="list1" v-if="withdrawalList.length!=0">
						<view class="item" v-for="item in withdrawalList">
							<view class="top flex_between">
								<view class="green flex">
									<text>{{$t('提现')}}</text>
								</view>
								<view class="item_time">2022-12-21</view>
							</view>
							<view class="item_detail flex_between">
								<view class="col_between">
									<view class="amount">+{{item.price}}</view>
									<view class="name">{{$t('提现金额')}}</view>
								</view>
								<view class="col_between" style="text-align: center;">
									<view class="amount">{{item.order_sn}}</view>
									<view class="name">{{$t('订单号')}}</view>
								</view>
								<view class="col_between" style="text-align: end;">
									<view class="amount">{{item.status_str}}</view>
									<view class="name">{{$t('状态')}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="no" v-else>No record yet</view>
				</view>
			</scroll-view>
		</view>
		<tab-view id="4"></tab-view>
	</view>
</template>

<script>
	import headerView from "@/components/headerView/index.vue"
	import tabView from "@/components/tabView/tabView.vue"
	import {
		withdrawalListApi,
		priceLogApi,
		rechargeListApi
	} from "@/api/api.js"
	export default {
		components: {
			tabView,
			headerView
		},
		data() {
			return {
				priceLog: [],
				withdrawalList: [],
				rechargeList: [],
				current: 0,
				navList: [
					this.$t('交易'),
					this.$t('充值'),
					this.$t('提现')
				],
				page: 1,
				total: 0
			};
		},
		onShow() {
			this.current = 0
			this.page = 1
			this.total = 0
			this.withdrawalList = []
			this.priceLog = []
			this.rechargeList = []
			this.getPriceLog()
		},
		methods: {
			switchTab(index) {
				if (this.current == index) {
					return
				}
				this.current = index
				this.page = 1
				this.total = 0
				this.withdrawalList = []
				this.priceLog = []
				this.rechargeList = []
				if (this.current == 0) {
					this.getPriceLog()
				} else if (this.current == 1) {
					this.getRecharge()
				} else if (this.current == 2) {
					this.getwithdrawal()
				}
			},
			scrollBottom() {
				console.log('滚动到底部')
				if (this.current == 0) {
					if (this.total == this.priceLog.length) {
						return
					}
					this.page++
					this.getPriceLog()
				} else if (this.current == 1) {
					if (this.total == this.rechargeList.length) {
						return
					}
					this.page++
					this.getRecharge()
				} else if (this.current == 2) {
					if (this.total == this.withdrawalList.length) {
						return
					}
					this.page++
					this.getwithdrawal()
				}
			},

			getPriceLog() {
				const params = {
					page: this.page
				}
				priceLogApi(params).then(res => {
					this.total = res.data.data.total
					if (this.page == 1) {
						this.priceLog = res.data.data.data
					} else {
						this.priceLog = [...this.priceLog, ...res.data.data.data]
					}
				})
			},
			getRecharge() {
				const params = {
					page: this.page
				}
				rechargeListApi(params).then(res => {
					this.total = res.data.data.total
					if (this.page == 1) {
						this.rechargeList = res.data.data.data
					} else {
						this.rechargeList = [...this.rechargeList, ...res.data.data.data]
					}
				})
			},
			getwithdrawal() {
				const params = {
					page: this.page
				}
				withdrawalListApi(params).then(res => {
					this.total = res.data.data.total
					if (this.page == 1) {
						this.withdrawalList = res.data.data.data
					} else {
						this.withdrawalList = [...this.withdrawalList, ...res.data.data.data]
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;

		.content {
			overflow: auto;
			flex: 1;
			display: flex;
			flex-direction: column;

			.nav {
				width: 100%;
				height: 90rpx;
				display: flex;
				position: sticky;
				top: 0;
				background: #0a0b24;
				z-index: 9;

				.nav-item {
					width: 33.3333%;
					line-height: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					font-size: 28rpx;
					font-weight: 400;
					color: #a4a4af;

					.line {
						width: 50rpx;
						height: 8rpx;
						border-radius: 4rpx;
						background: transparent;
					}
				}

				.active {
					color: #9984dc;

					.line {
						background: #9984dc;
					}
				}
			}

			.list {
				flex: 1;
				overflow: auto;
				padding-bottom: 85rpx;

				.list1 {
					.item {
						border-bottom: 10rpx solid #151630;
						padding: 0 32rpx 32rpx 32rpx;
						color: #fff;


						.item_time {
							height: 140rpx;
							line-height: 140rpx;
							font-size: 22rpx;
							font-weight: 400;
							color: #8d8d98;
						}

						.item_detail {
							>uni-view {
								flex: 1;
								height: 100%;
							}

							.amount {
								font-size: 28rpx;
								font-weight: 400;
								color: #f3f7f5;
								margin-bottom: 26rpx;
							}

							.name {
								font-size: 28rpx;
								font-weight: 400;
								color: #8c898f;
							}
						}
					}
				}

				.no {
					line-height: 200rpx;
					text-align: center;
					color: #666;
					font-size: 30rpx;
				}
			}
		}
	}
</style>